"use client";
import React from "react";
import { LayoutGrid } from "./../components/ui/layout-grid";
import {
  CardHeader,
  Card,
  CardBody,
  CardFooter,
  Divider,
  Button,
} from "@heroui/react";
import { TypewriterEffectSmooth } from "../components/ui/typewriter-effect";
import { Command } from "@tauri-apps/plugin-shell";
import { invoke } from "@tauri-apps/api/core";

export function ModelView() {
  return (
    <div className="h-screen py-20 w-full">
      <Card
        shadow="md"
        classNames={{
          base: "w-full h-full bg-gray-800/25",
          body: "",
        }}
        isFooterBlurred
      >
        <CardHeader className="flex flex-col items-start">
          <TypewriterEffectSmooth
            className="h-10 my-2 items-center"
            cursorClassName="text-2xl relative top-1"
            words={[
              { text: "模", className: "text-2xl tracking-widest" },
              { text: "型", className: "text-2xl tracking-widest" },
              { text: "列", className: "text-2xl tracking-widest" },
              { text: "表", className: "text-2xl tracking-widest" },
            ]}
          ></TypewriterEffectSmooth>
          <p className="text-small text-default-500">目前可用的模型</p>
        </CardHeader>
        <Divider></Divider>
        <CardBody>
          <LayoutGrid cards={cards} />
        </CardBody>
        <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 bg-transparent overflow-hidden py-1 absolute before:rounded-xl rounded-lg bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
          <p className="text-tiny text-white/80">请输入文本</p>
          <Button
            className="text-tiny text-white bg-black/20"
            color="default"
            radius="lg"
            size="sm"
            variant="flat"
            onPress={async () => {
              let res = await invoke("ratatui");
            }}
          >
            Test
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

const SkeletonOne = () => {
  return (
    <div>
      <p className="font-bold md:text-4xl text-xl text-white">SEIR模型</p>
      <p className="font-normal text-base text-white"></p>
      <p className="font-normal text-base my-4 max-w-lg text-neutral-200">
        SEIR模型是一种传染病传播动力学模型，主要用于模拟具有潜伏期的疾病（如流感、COVID-19等）的传播过程。该模型将人群划分为四类状态：易感者（Susceptible）、暴露者（Exposed）、感染者（Infectious）和康复者（Recovered），并通过微分方程描述不同状态之间的动态转移关系。
      </p>
    </div>
  );
};

const SkeletonTwo = () => {
  return (
    <div>
      <p className="font-bold md:text-4xl text-xl text-white">SIR模型</p>
      <p className="font-normal text-base text-white"></p>
      <p className="font-normal text-base my-4 max-w-lg text-neutral-200">
        SIR模型是一种经典的传染病传播动力学模型，用于模拟无潜伏期或潜伏期极短的传染病的传播过程。该模型将人群划分为三类状态：易感者（Susceptible）、感染者（Infectious）和康复者（Recovered），并通过微分方程描述状态间的动态转移关系。
      </p>
    </div>
  );
};
const SkeletonThree = () => {
  return (
    <div>
      <p className="font-bold md:text-4xl text-xl text-white">SEIR模型</p>
      <p className="font-normal text-base text-white"></p>
      <p className="font-normal text-base my-4 max-w-lg text-neutral-200">
        SEIR模型是一种传染病传播动力学模型，主要用于模拟具有潜伏期的疾病（如流感、COVID-19等）的传播过程。该模型将人群划分为四类状态：易感者（Susceptible）、暴露者（Exposed）、感染者（Infectious）和康复者（Recovered），并通过微分方程描述不同状态之间的动态转移关系。
      </p>
    </div>
  );
};
const SkeletonFour = () => {
  return (
    <div>
      <p className="font-bold md:text-4xl text-xl text-white">SEIR模型</p>
      <p className="font-normal text-base text-white"></p>
      <p className="font-normal text-base my-4 max-w-lg text-neutral-200">
        SEIR模型是一种传染病传播动力学模型，主要用于模拟具有潜伏期的疾病（如流感、COVID-19等）的传播过程。该模型将人群划分为四类状态：易感者（Susceptible）、暴露者（Exposed）、感染者（Infectious）和康复者（Recovered），并通过微分方程描述不同状态之间的动态转移关系。
      </p>
    </div>
  );
};

const cards = [
  {
    id: 1,
    content: <SkeletonOne />,
    className: "md:col-span-2",
    thumbnail: " https://cdn.simpleicons.org/python/eee",
  },
  {
    id: 2,
    content: <SkeletonTwo />,
    className: "col-span-1 ",
    thumbnail: "https://cdn.simpleicons.org/python/eee",
  },
  {
    id: 3,
    content: <SkeletonThree />,
    className: "col-span-1 ",
    thumbnail: "https://cdn.simpleicons.org/rust/eee",
  },
  {
    id: 4,
    content: <SkeletonFour />,
    className: "md:col-span-2 ",
    thumbnail: "https://cdn.simpleicons.org/Tauri/eee",
  },
];
